<template>
  <view class="index bgDefault" >
	<tn-nav-bar v-if="currentIndex==2" :isBack="false" :backgroundColor="backgroundColor" fixed>{{title}}</tn-nav-bar>
	<view class="index_content">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <Basic ref="basic"></Basic>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <Activity ref="activity"></Activity>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		     <Space ref="space"></Space>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
		  <scroll-view :class="show?'custom-tabbar-page':'custom-tabbar-page2'" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <mentorIndex ref="mentor" @popStatus="popStatus"></mentorIndex>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
			<tuniao ref="about"></tuniao>
		  </scroll-view>
		</view>
	</view>
    
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="tn-cool-bg-color-7"
      :animation="true"
      :safeAreaInsetBottom="true"
	  :show = "show"
      @change="switchTabbar"
    ></tn-tabbar>
  </view>
</template>

<script>
  import Basic from '../basic/basic.vue'
  import Space from '../space/index.vue'
  import mentorIndex from '../mentor/index.vue'
  import Activity from '../activity/index.vue'
  import Tuniao from '../user/index.vue'
  
  export default {
    components: {
      Basic,
      Space,
      mentorIndex,
      Activity,
      Tuniao
    },
    data() {
      return {
		show:true,
		title:"布芒的家",
		backgroundColor:"#FFFFFF",
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首页',
            activeIcon: 'https://www.zztengma.com/lihu/bumang/images/menu000.png',
            inactiveIcon: 'https://www.zztengma.com/lihu/bumang/images/menu00.png',
			activeColor: "#ff6708",
			inactiveColor: '#c3c3c3'
          },
		  {
		    title: '社群',
		   activeIcon: 'https://www.zztengma.com/lihu/bumang/images/menu004.png',
		   inactiveIcon: 'https://www.zztengma.com/lihu/bumang/images/menu04.png',
		   activeColor: "#ff6708",
		   inactiveColor: '#c3c3c3'
		  },
          {
            title: '空间',
            activeIcon: 'https://www.zztengma.com/lihu/bumang/images/menu001.png',
            inactiveIcon: 'https://www.zztengma.com/lihu/bumang/images/menu01.png',
            activeColor: "#ff6708",
            inactiveColor: '#c3c3c3'
          },
          {
            title: '主理人',
            activeIcon: 'https://www.zztengma.com/lihu/bumang/images/menu003.png',
            inactiveIcon: 'https://www.zztengma.com/lihu/bumang/images/menu03.png',
            activeColor: "#ff6708",
            inactiveColor: '#c3c3c3'
          }
          ,
          {
            title: '我的',
           activeIcon: 'https://www.zztengma.com/lihu/bumang/images/menu002.png',
           inactiveIcon: 'https://www.zztengma.com/lihu/bumang/images/menu02.png',
           activeColor: "#ff6708",
           inactiveColor: '#c3c3c3'
          }
          
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: []
      }
    },
    onLoad(options) {
      const index = Number(options.index || 0)
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    methods: {
		popStatus(isOpen){
			if(isOpen) this.show = false
			else this.show = true
		},
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
      },
      
      
      // 导航页面滚动到底部
      tabbarPageScrollLower(e) {
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
		
		var _t = this.tabbarList[index].title
		this.title = _t == "首页" ?"布芒的家":_t
		
		if(index==4){
			this.backgroundColor = "none"
		}else{
			this.backgroundColor = "#FFFFFF"
		}
		
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .index {
    overflow: hidden;
    height: 100%;
  }
  
  .custom-tabbar-page {
    height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  }
  
  .custom-tabbar-page2 {
    height: calc(100vh - (100rpx / 2));
  }
  
  
  .bgDefault{
	  background: $tn-main-bg;
	 .index_content{
		 padding: 0 7%;
	 }
  }
  
  .bgDefault-index{
  	  background: linear-gradient(-225deg, #cde6cc 0%, #b5e1e8 41%, #94b2dd 100%);
  	 .index_content{
  		 padding: 0 7%;
  	 }
  }

</style>
